<template>
  <div class="component-panel">
    <h3>名称: {{ focused.name }}</h3>
    <button @click="toDelete">删除</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    focused: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  setup() {},
  methods: {
    toDelete() {
      if (!this.focused.name) return
      this.$emit('del', this.focused)
    }
  }
})
</script>

<style lang="scss" scoped>
.component-panel {
  position: fixed;
  top: 100px;
  right: 10px;
  width: 300px;
  height: 600px;
  border-radius: 5px;
  background: #fff;
}
</style>
